{% extends "base.html" %}

{% block main %}
<script>
    function signin() {
        let form = document.querySelector('#signin-form');
        let email = form.querySelector('input[name=email]').value;
        let password = form.querySelector('input[name=password]').value;
        let data = {
            email: email,
            password: password
        };
        fetch('/api/signin', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        }).then(resp => {
            resp.json().then(result => {
                console.log(result);
                if (result.error) {
                    alert(`Sign in failed: ${result.error}`);
                } else {
                    alert(`Welcome, ${result.name}!`);
                }
            });
        });
        return false;
    }
</script>
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><span class="glyphicon glyphicon-user"></span> Please sign in</h3>
                </div>
                <div class="panel-body">
                    <form id="signin-form" onsubmit="return signin()">
                        <div class="form-group">
                            <label>Email address</label>
                            <input type="email" name="email" value="admin@example.com" class="form-control"
                                placeholder="Email">
                            <p class="help-block">Use email: admin@example.com</p>
                        </div>
                        <div class="form-group">
                            <label>Password</label>
                            <input type="password" name="password" value="123456" class="form-control"
                                placeholder="Password">
                            <p class="help-block">Use password: 123456</p>
                        </div>
                        <button type="submit" class="btn btn-primary">Sign In</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-6">
        </div>
    </div>
</div>
{% endblock %}